<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <ul>
      <li v-for = "(letter,index) in letters ">{{letter}}</li>
    </ul>
    <button @click='btn'>点击执行响应式方法</button>
    <!-- 数据是响应式
    数组的方法
    -->
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        letters:['A','B','C','D','E']
      },
      methods:{
        btn(){
          //可以加多个 数组的方法 都是响应式的方法
          //1.push方法
          // this.letters.push("aaa")
          //2.pop方法
          // this.letters.pop()
          //3.shift方法
          // this.letters.shift()
          //4.unshift
          // this.letters.unshift('222')
          //5.splice 删除元素/插入元素/替换元素
          //删除元素：第二个参数传入你要删除的几个元素(start,个数)
          //替换元素：第三个传入你要替换的元素（start，个数，替换的元素）
          //插入：不删除第二个元素是0 第三要插入的元素（start，0，插入的元素）
          // this.letters.splice(1,1)
          // 6.sort 排序
          //7.reverse 反转


          //2.通过索引值修改数组中的元素 不是响应式的
          // this.letters[0]='bbbbb';

          //3.set(要修改的对象，索引值，修改后的值)
          //Vue.set(this.letters,0,'')

          
        }
        
      }
    })
  </script>
</body>
</html>